<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<jsp:include page="../commons/top.jsp" />
<script type="text/javascript">
 	// 查询
	function reportSearch(){
		
		$("#reportForm").attr("action","<c:url value="/statistic/headOffice" />");
		$("#reportForm").submit();
	}
	// 重置
	function reportReset() {
		
		window.location.href = "<c:url value="/statistic/headOffice" />";
	}
</script>
<div id="breadCrumbDiv">
	<span class="main_title"><a href="main.html">首页</a></span>
	<span class="main_title"><a href="#">百年系统报表</a></span>
	<span class="main_title"><a href="#">销售统计分析表(总部)</a></span>
</div>
<div id="workAreaDiv">
	<div id="organizationListDiv">
		<form id="reportForm" action="" method="post">
		<table border="0" cellpadding="0" cellspacing="0" width="100%" class=""> 
	    <tr> 
	    	<td class="table_title">查询</td> 
	    </tr>
	    <tr> 
      	<td> 
      		<table width="100%" cellpadding="1" cellspacing="1" border="0" class="table_border"> 
          	<tr class="table_display_1"> 
	            <td width="5%" class="table_display_2">周期</td> 
	            <td width="10%">
	            	<select id="reportType" name="reportType">
              		<option value="">----</option>
            			<option value="YSD00001" 
            				<c:if test="${param.reportType eq 'YSD00001'}">selected</c:if>
            			>日</option>
            			<option value="YSW00001"
            				<c:if test="${param.reportType eq 'YSW00001'}">selected</c:if>
            			>周</option>
            			<option value="YSM00001"
            				<c:if test="${param.reportType eq 'YSM00001'}">selected</c:if>
            			>月</option>
              	</select>
	            </td> 
           	</tr> 
           </table>
        </td> 
      </tr> 
    	<tr align="right" class="btnTR"> 
	      <td> 
	      	<input type="button" onclick="reportSearch()" value="查询">&nbsp;
		      <input type="button" onclick="reportReset()" value="重置"/> 
	      </td> 
    	</tr> 
    </table>
    </form> 
    <br/> 
		<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0;padding: 0;"> 
			<tr> 
				<td class="table_title" colspan="2">销售统计分析表(总部)</td>
			</tr>
			<tr> 
				<td> 
					<div id="reportDiv" style="width: 100%;height:400px;"></div>
					<script type="text/javascript" src="<c:url value="/js/echarts.common.min.js"/>"></script>
					<script type="text/javascript">
						var myChart = echarts.init(document.getElementById('reportDiv'));
						
						var date = ${dataMap.dateList};
						var totalData = ${dataMap.totalList};
						var pizhouData = ${dataMap.pizhouList};
						var fuyangData = ${dataMap.fuyangList};
						var hushiData = ${dataMap.hushiList};
						var weekDetail = ${dataMap.weekDetailList};
						
						var option = {
						    tooltip: {
						        trigger: 'axis',
						        formatter:function(params){
						        	
						       		var index = params[0].dataIndex;
						        	
						        	var content = params[0].name + '';
						        	
						        	if(content.length > 6){
						        		content = content.substring(0, 4) + "年" + content.substring(4,6) + "月"
						        		+ content.substring(6)
						        		+ $("#reportType").find("option:selected").text();
						        	}
						        	else{
						        		content = content.substring(0, 4) + "年" + content.substring(4) 
						        		+ $("#reportType").find("option:selected").text();
						        	}
						        	
						        	if(weekDetail.length > 0){
						        		content +=  "<br/>"+weekDetail[index];
						        	}
						        	
						        	content	+=	"<ul style=\"margin: 0;padding: 2px 8px 2px 18px;\">"
						        		+	"<li>总数：" + params[0].data + "</li>"
						        		+ "<li>邳州：" + pizhouData[index] + "</li>"
						        		+ "<li>富阳：" + fuyangData[index] + "</li>"
						        		+ "<li>呼市：" + hushiData[index] + "</li>"
						        		+ "</ul>";
						        		
						        	return content;
						        }						        
						    },
						    /* toolbox: {
						        show: true,
						        feature: {
						            dataView: {show: true, readOnly: false},
						            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
						            restore: {show: true},
						            saveAsImage: {show: true}
						        }
						    }, */
						    xAxis: {
						        type: 'category',
						        boundaryGap: false,
						        data: date
						    },
						    yAxis: {
						        type: 'value',
						        boundaryGap: [0, '100%']
						    },
						    dataZoom: [{
						        type: 'inside',
						        start: 0,
						        end: 10
						    }, {
						        start: 0,
						        end: 10
						    }],
						    series: [
						        {
						            name:'总数',
						            type:'line',
						            smooth:true,
						            symbol: 'none',
						            sampling: 'average',
						            itemStyle: {
						                normal: {
						                    color: 'rgb(255, 70, 131)'
						                }
						            },
						            areaStyle: {
						            	normal: {}
						            },
						            data: totalData
						        }
						    ]
						};
						
						// 使用刚指定的配置项和数据显示图表。
					  myChart.setOption(option);
					</script>
				</td> 
			</tr> 
		</table> 
	</div>
</div>
<jsp:include page="../commons/bottom.jsp" />